import React, {memo, useCallback, useState, useEffect, useMemo} from 'react';
import {View} from 'react-native';
import styles from './ProductDetailHeader.style';
import ProductDetailSwiper from './product-com/ProductDetailSwiper';
import BaseInfo from './product-com/BaseInfo';
import AddCart from './product-com/AddCart';
import {http, api} from '../../http';

const ListHeaderComponent = props => {
  console.log(props, 'item');
  const {product} = props;
  const [isLoad, setIsLoad] = useState(false);
  const [images, setimages] = useState([]);
  const computedImages = useMemo(() => {
    if (isLoad && images && images.length > 0) {
      const arr = images[0].images[0];
      return arr.indexOf(product.icon > -1) ? arr : [product.icon, ...arr];
    }
    return [product.icon];
  }, [images, product, isLoad]);
  useEffect(() => {
    if (!isLoad) {
      const params = {product_name: product.product_url};
      http.get(api.PRODUCT_DETAIL, params).then(res => {
        if (res) {
          console.log(res, 'PRODUCT_DETAIL');
          setIsLoad(true);
          setimages(res.images);
        }
      });
    }
  }, [isLoad, product]);
  const l = [product, product, product];
  const addCartAction = useCallback(() => {
    console.log('添加购物车');
  }, []);
  return (
    <View style={styles.productDetailBox}>
      {/* swiper */}
      <ProductDetailSwiper list={computedImages} />
      {/* 商品主信息 */}
      <BaseInfo />
      {/* 加入购物车 */}
      <AddCart callBack={addCartAction} />
    </View>
  );
};
export default memo(ListHeaderComponent);
